<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>可视化大屏自适应 Demo（vw/vh · scale · rem）</title>
  <link rel="stylesheet" href="styles.css" />
  <style>
    body { margin: 0; color: #e6f0ff; background: radial-gradient(50% 50% at 50% 50%, #0e1430 0%, #070b1f 100%); }
  </style>
  <!-- ECharts CDN -->
  <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
</head>
<body class="scale-mode">
  <div class="controls" role="group" aria-label="模式切换">
    <button id="btnVWVH" class="mode-btn" title="vw/vh 逐项适配">VW/VH</button>
    <button id="btnScale" class="mode-btn active" title="scale 整页缩放">Scale</button>
    <button id="btnREM" class="mode-btn" title="rem + vw">REM</button>
  </div>

  <div id="app">
    <header class="header">示例大屏头部</header>
    <main class="main">
      <section class="left">
        <div class="panel">
          <h3 class="panel-title">左侧模块</h3>
          <div class="panel-content">一些统计卡片/列表</div>
        </div>
        <div class="panel">
          <h3 class="panel-title">左侧图表</h3>
          <div id="chart-left" class="chart"></div>
        </div>
      </section>
      <section class="center">
        <div class="panel large">
          <h3 class="panel-title">中心地图/主图表</h3>
          <div id="chart-center" class="chart"></div>
        </div>
      </section>
      <section class="right">
        <div class="panel">
          <h3 class="panel-title">右侧模块</h3>
          <div class="panel-content">更多统计与进度</div>
        </div>
        <div class="panel">
          <h3 class="panel-title">右侧图表</h3>
          <div id="chart-right" class="chart"></div>
        </div>
      </section>
    </main>
    <footer class="footer">示例大屏底部 © 2025</footer>
  </div>

  <script src="script.js"></script>
</body>
</html>


